<template>
    <div>
        <h2>商品列表</h2>
        <div class="goodslist">
            <!-- <div class="goods" v-for="item in list" :key='item.id'>
                <router-link :to="'/goodinfor/'+item.id">
                    <img :src="item.url" alt="">
                    <h4>{{item.name}}</h4>
                </router-link>
            </div> -->
             <div class="goods" v-for="item in list" :key='item.id' @click="golist(item.id)">
                    <img :src="item.url" alt="">
                    <h4>{{item.name}}</h4>    
            </div>
        </div>
        <mt-button type='danger' size='large' @click="getmore">加载更多</mt-button>
    </div>
</template>
<script>
export default {
    data(){
        return{
           list:[]
        }
      
    },
    created(){
        this.getgoods()
    },
    methods:{
        getgoods(){
            this.$http.get('http://jsonplaceholder.typicode.com/users')
            .then(res=>{
               res.body.forEach(element => {
                    element.url='https://placekitten.com/600/400'
                    element.width=600
                    element.height=400
                });
                this.list=this.list.concat(res.body)
            })
        },
        getmore(){
             this.getgoods();
            
        },
        golist(id){
            this.$router.push('/goodinfor/'+id)
        }
    }
}
</script>

<style scoped>
  .goodslist{
      display: flex;
      flex-wrap: wrap;
      padding: 7px;
      justify-content: space-between;
  }
  .goods{
     width: 49%;
     border: 1px solid #ccc;
     margin: 3px 0;
     box-shadow: 0,0,8px,#999;
     display: flex;
     flex-direction: column;
        justify-content: space-between;
  }
   .goods img{
       width: 100%;
   }
    .goods h4{
        background: #999;
        margin: 0;
        padding: 0;
        text-align: center;
    }
</style>
